<template>
  <span :class="['el-dot',`el-dot-${type}`]" :style="dotSize" />
</template>

<script>
export default {
  /**
   * ElDot 小圆点
   * @type 不同颜色表示不同状态  支持类型 primary / success / warning / error
   */
  name: 'ElDot',
  props: {
    size: {
      type: Number,
      default: 6
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  computed: {
    dotSize() {
      const size = (this.size && `${this.size}px`) || '6px'
      return {
        width: size,
        height: size
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$dot-primary: #409eff;
.el-dot {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

// 默认
.el-dot-primary {
  position: relative;
  background-color: $dot-primary;
  &::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid $dot-primary;
    border-radius: 50%;
    animation: antStatusProcessing 1.2s ease-in-out infinite;
  }
}

@-webkit-keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes antStatusProcessing {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.5;
  }
  to {
    -webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0;
  }
}

// 成功
.el-dot-success {
  background-color: #19be6b;
}

// 警告
.el-dot-warning {
  background-color: #ff9900;
}

// 错误
.el-dot-error {
  background-color: #ed4014;
}
</style>
